<template>
  <div>
    <el-form ref="form" :model="value" :inline="true" :rules="rules" size="small" label-width="80px">
      <el-form-item label="工单来源" prop="orderSource">
        <el-select v-model="value.orderSource" clearable class="filter-item" @change="toQuery">
          <el-option v-for="item in orderSourceOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
        </el-select>
      </el-form-item>

      <el-form-item label="来源信息" prop="sourceId">
        <el-select v-model="value.sourceId" clearable class="filter-item" @change="toQuerySource">
          <el-option v-for="item in sourceIdOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-form>

    <div style="text-align: right">
      <el-button :loading="loading" type="primary" @click="handleNext()">下一步</el-button>
      <el-button type="text" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { add, edit } from '@/api/tWorkOrder'
export default {
  name: "OrderFrom",
  props: {
    value: Object,
    isAdd: {
      type: Boolean,
      required: true
    },
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false, dialog: false,
      orderSourceOptions: [
        { key: '1', display_name: '故障单' },
        { key: '2', display_name: '任务单' },
        { key: '3', display_name: '巡检任务' }
      ],
      sourceIdOptions:[],
      rules: {
        orderSource: [
          { required: true, message: '请选择工单来源', trigger: 'blur' }
        ],
        sourceId: [
          { required: true, message: '请选择来源信息', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    toQuery() {
      this.sourceIdOptions = [];
      if(this.value.orderSource=="1"){
        request({
          url: 'api/tAccident/order',
          method: 'get'
        }).then(res => {
          const content = [].concat(res);
          const _this = this
          content.forEach(function(data, index) {
              const sourceIdOptions = {id: data.id,name: data.faultDesc}
              _this.sourceIdOptions.push(sourceIdOptions)
            })
        }).catch(err => {
          console.log(err.response.data.message)
        })  
      } else if(this.value.orderSource=="2"){
        request({
          url: 'api/tTasks/order',
          method: 'get'
        }).then(res => {
          const content = [].concat(res);
          const _this = this
          content.forEach(function(data, index) {
              const sourceIdOptions = {id: data.id,name: data.taskTitle}
              _this.sourceIdOptions.push(sourceIdOptions)
            })
        }).catch(err => {
          console.log(err.response.data.message)
        })  
      } else {
        request({
          url: 'api/tInspectionTask/order',
          method: 'get'
        }).then(res => {
          const content = [].concat(res);
          const _this = this
          content.forEach(function(data, index) {
              const sourceIdOptions = {id: data.id,name: data.planName}
              _this.sourceIdOptions.push(sourceIdOptions)
            })
        }).catch(err => {
          console.log(err.response.data.message)
        })  
      }
    },
    toQuerySource(){

    },
    handleNext(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('nextStep',this.value.sourceId,this.value.orderSource);
        }
      })
    },
    cancel() {
      this.sourceIdOptions=[]
      this.$emit('cancel');
    }
  }
}
</script>

<style scoped>

</style>